{% extends 'base.html' %}
{% load static %}
{% block title %}专辑列表{% endblock %}
{% block header %}
    <div class="container">
        <form class="d-flex" role="search" method="get">
            <input
                    class="form-control me-2"
                    type="text"
                    placeholder="搜索专辑或描述"
                    name="q"
                    value="{{ search_query|default_if_none:'' }}"
                    aria-label="search"/>
            <button class="btn btn-outline-success" type="submit">搜索</button>
        </form>
    </div>
    <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"
            data-bs-whatever="@getbootstrap">上传
    </button>
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog-centered modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">上传图片</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="album-upload-form" action="{% url 'album_create' %}" method="post"
                          enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label for="recipient-name" class="col-form-label">图片标题:</label>
                            <input type="text" class="form-control" id="recipient-name" name="album_title" required>
                        </div>
                        <div class="mb-3">
                            <label for="message-text" class="col-form-label">描述:</label>
                            <textarea class="form-control" id="message-text" name="description"></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="pic-file" class="col-form-label">图片:</label>
                            <input type="file" class="form-control" id="pic-file" name="image" required>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block content %}

    <div class="album py-5 bg-body-tertiary">
        <div class="container">
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-3">
                {% for c in album %}
                    <div class="card">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#mainImageModal{{ c.id }}">
                            <img src="{{ c.image.url }}" alt="{{ c.album_title }}" class="img-fluid rounded"
                                 title="{{ c.get_img_size }}">
                        </a>
                        <div class="card-body">
                            <p class="card-text">标题：{{ c.album_title }}</p>
                            <p class="card-text">描述：{{ c.description }}</p>
                            <p class="card-text">分辨率：{{ c.get_img_size|first }}*{{ c.get_img_size|last }}</p>
                            <p class="card-text">下载量：{{ c.download_count }}</p>
                            <p class="card-text">上传时间：{{ c.date_created }}</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-success">
                                        <a href="{% url 'album_download' c.id %}" style="text-decoration: none">
                                            下载
                                        </a>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-danger">
                                        <a href="{% url 'album_delete' c.id %}" style="text-decoration: none">
                                            删除
                                        </a>
                                    </button>


                                </div>
                            </div>

                        </div>
                    </div>
                    <!-- 主图片查看模态框 -->
                    <div class="modal fade" id="mainImageModal{{ c.id }}" tabindex="-1"
                         aria-labelledby="mainImageModalLabel{{ c.id }}"
                         aria-hidden="true">
                        <div class="modal-dialog modal-xl">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="mainImageModalLabel">
                                        源图</h5>
                                    <button type="button" class="btn-close"
                                            data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                </div>
                                <div class="modal-body text-center">
                                    <img src="{{ c.image.url }}" alt="任务主图片"
                                         class="img-fluid">
                                </div>
                                <div class="modal-footer">
                                    <a href="{{ c.image.url }}" class="btn btn-primary"
                                       target="_blank">在新标签页中打开</a>
                                    <button type="button" class="btn btn-secondary"
                                            data-bs-dismiss="modal">
                                        关闭
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                {% empty %}
                    <div class="col-12 text-center py-5">
                        <p>未找到符合条件的专辑。</p>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>

{% endblock %}